<template>
  <div>
  
    <div
      style="width: 100%;display: flex;justify-content: space-between; position: relative;margin-bottom: 24px;">
      <div v-for="(item, idx) in classifyList" :key="idx" @click="changeTab(idx,item.id)"
        style="display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;cursor: pointer;">
        <img :src="item.image" style="width: 62px;height: 50px;object-fit: cover;" alt="">
        <div style="margin-top: 15px;margin-bottom: 18px;" :class="navIndex == idx ? 'navClick' : 'navNormal'">
          {{ item.name }}
        </div>

        <div v-if="navIndex == idx"
          style="width: 177px;height: 5px;background-color: #2072F5;position: relative;z-index: 3;">
        </div>
      </div>
      <div style="position: absolute;left: 0;bottom: 0;width: 100%;height: 3px;background-color: #E3E7EA;"></div>
    </div>

    <div class="index-memo" v-for="i in list" :key="i.id">
      <div class="index-memo-top">
        <el-image :src="i.index_img" fit="cover" class="index-memo-cover"></el-image>
        <div class="index-memo-top-right">
          <div class="index-memo-title">
            <span>{{ i.name }}</span>
            <span class="index-memo-title-red index-memo-title-dian" v-if="i.type_name">·</span>
            <span class="index-memo-title-red" v-if="i.type_name">{{ i.type_name }}</span>
            <img style="width: 5.875rem; height: 2.125rem; margin-left: 0.625rem" src="../../assets/img/01.png"
              v-if="i.is_hot == 1" />
          </div>
          <div class="index-memo-brief" v-for="(ii, vv) in i.brief" :key="vv">
            <img v-if="ii.type == 1" src="../../assets/img/03.png" class="index-memo-brief-icon" />
            <img v-if="ii.type == 0" src="../../assets/img/02.png" class="index-memo-brief-icon" />
            <div class="index-memo-brief-txt">
              {{ ii.content }}
            </div>
          </div>
          <div class="index-memo-bottom">
            <div class="index-memo-bottom-red">¥</div>
            <div class="index-memo-bottom-red index-memo-bottom-price">
              {{ i.price }}
            </div>
            <div class="index-memo-bottom-red index-memo-bottom-unit" style="white-space: nowrap">
              {{ i.unit }}
            </div>
            <div style="display: flex; width: 100%; justify-content: flex-end">
              <div
                class="index-card-footer-btn index-card-footer-btn-red index-memo-bottom-text index-memo-bottom-blue newbtn"
                @click="seeFa(i)">
                <div style="font-size: 15px">查看方案</div>
              </div>
              <div class="index-card-footer-btn index-card-footer-btn-red index-memo-bottom-text newbtn2"
                @click="toTou(i)">
                <div style="font-size: 15px">立即投保</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="list.length <= 0" style="
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 7.5rem;
        height: 500px;
        width: 1000px;
      ">
      <img src="@/assets/img/nodata.png" style="height: 11.25rem; object-fit: contain" alt="" />
      <div style="color: #999999; font-size: 1.125rem">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {},
    classifyList:{}
  },
  data() {
    return {
      navList: [{
        name: "空调家电行业",
        image: require('@/assets/img/1.png')
      }, {
        name: "新能源行业",
        image: require('@/assets/img/2.png')
      }, {
        name: "汽车充电桩行业",
        image: require('@/assets/img/3.png')
      }],
      navIndex: 0,
      classify_id:''
    };
  },
  methods: {
    changeTab(idx,id) {
      this.navIndex = idx;
      this.classify_id = id;
 
      
      this.$emit('getClassifyId',this.classify_id);
      // this.$emit('update:navIndex', idx);
      // 这里可以根据实际需求触发数据切换
      // this.$emit('tab-change', idx);
    },
    seeFa(item) {
      this.$router.push({
        path: "/index/index/detail/" + item.id,
      });

      // if (item.type == 1) {
      //     this.$router.push({
      //         path: "/index/index/detail/" + item.id,
      //     });
      // } else {
      //     this.$router.push({
      //         path: "/index/index/detailGF/" + item.id,
      //     });
      // }
    },
    toTou(item) {
      let text = "";
      if (item.type == 1) {
        text = "太平洋保险";
      } else if (item.type == 2) {
        text = "中国平安保险";
      } else if (item.type == 3) {
        text = "中国人寿保险";
      }
      this.$alert(
        `尊敬的客户，您即将进入${text}的产品投保流程。根据银保监会[2020] 26号的监管规定，为了维护您的权益，您在投保过程中的完整操作轨迹将被记录，请您仔细阅读条款、责任免除、特别约定等内容。`,
        "重要提示",
        {
          confirmButtonText: "确定",
          callback: (action) => {
            if (action == "confirm") {
              // if (this.$store.state.loginState == false) {
              //   return this.$router.push({
              //     path: "/index/login/login",
              //   });
              // }

              this.$router.push({
                path: "/index/index/form/" + item.id,
              });
            }
          },
        }
      );

      // this.getTanChuan(item);
      // return;
      //   this.$router.push({
      //     path: "/index/index/form/" + item.id,
      //   });
      // if (item.type == 1) {
      //     // debugger
      //     this.$router.push({
      //         path: "/index/index/form/" + item.id,
      //     });
      // } else {
      //     this.$router.push({
      //         path: "/index/index/formGF/" + item.id,
      //     });
      // }
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/index/index.css";

.navClick {
  font-size: 20px;
  font-weight: bold;
  color: #2072F5;
}

.navNormal {
  font-size: 20px;
}
</style>
